<template>
	<view class="" style="padding-bottom: 40rpx;">
		<view class="" style="padding: 30rpx 30rpx 0;">
			<!-- 搜索 -->
			<view class="sobox flexleft">
				<view class="margin_right1">
					<view class="flexleft">
						<view class="xiaohui smalltext margin_right0">住</view>
						<view class="xiaocheng smalltext">{{startime}}</view>
					</view>
					<view class="flexleft">
						<view class="xiaohui smalltext margin_right0">离</view>
						<view class="xiaocheng smalltext">{{endtime}}</view>
					</view>
				</view>
				<view class="ershil xiaocheng fonweight margin_right3">{{citytext}}</view>
				<view class="dqline margin_right2"></view>
				<view class="margin_right1">
					<u-icon name="search" color="#999" size="20"></u-icon>
				</view>
				<input placeholder="酒店/关键词" type="text" v-model="keyword" confirm-type="search" @confirm="init()"/>
			</view>
			
		</view>
		<!-- 筛选 -->
		<view class="mainpadding ffffff radius margin_top">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="ershib margin_right0" @click="pickerdzshow=true"
						:class="citydata.cityid?'xiaohuang':'xiaohui'">位置区域</view>
					<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="citydata.cityid"></u-icon>
					<u-icon name="arrow-down-fill" color="#999" size="8" v-else></u-icon>
				</view>
				<view class="flexleft">
					<view class="ershib margin_right0" :class="star_type?'xiaohuang':'xiaohui'" @click="sx(1)">评分排序
					</view>
					<view class="flexcolumn">
						<view class="">
							<u-icon name="arrow-up-fill" color="#ff9341" size="8" v-if="star_type==2"></u-icon>
							<u-icon name="arrow-up-fill" color="#999" size="8" v-if="star_type!=2"></u-icon>
						</view>
						<view class="" style="margin-top: 5rpx;">
							<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="star_type==1"></u-icon>
							<u-icon name="arrow-down-fill" color="#999" size="8" v-if="star_type!=1"></u-icon>
						</view>
					</view>
				</view>
				<view class="flexleft">
					<view class="ershib margin_right0" :class="price_type?'xiaohuang':'xiaohui'" @click="sx(2)">价格排序
					</view>
					<view class="flexcolumn">
						<view class="">
							<u-icon name="arrow-up-fill" color="#ff9341" size="8" v-if="price_type==2"></u-icon>
							<u-icon name="arrow-up-fill" color="#999" size="8" v-if="price_type!=2"></u-icon>
						</view>
						<view class="" style="margin-top: 5rpx;">
							<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="price_type==1"></u-icon>
							<u-icon name="arrow-down-fill" color="#999" size="8" v-if="price_type!=1"></u-icon>
						</view>
		
					</view>
				</view>
				<!-- <view class="flexleft">
					<view class="strongtext xiaohui margin_right0">筛选</view>
					<u-icon name="arrow-down-fill" color="#ff9341" size="8"></u-icon>
					<u-icon name="arrow-down-fill" color="#999" size="8"></u-icon>
				</view> -->
			</view>
		</view>
		<view class="ffffff radius mainpadding margin_top" v-for="item in list.data" :key="item.id" @click="tzjdxq(item.id,item.distance)">
			<view class="flexleft">
				<view class="flexcenter sanshis" v-for="(ite,inde) in item.images_text" :key="inde"  v-if="inde==0 || inde==1 || inde==2">
					<image class="tupian" :src="ite" mode=""></image>
				</view>
			</view>
			<view class="zhonghei fonweight sanshier margin_top">{{item.name}}</view>
			<view class="flexleft margin_top2">
				<view class="fenbox margin_right1">积分抵扣￥20</view>
				<view class="huangbox margin_right1">首单优惠￥56</view>
				<view class="fenbox">活动优惠￥23</view>
			</view>
			<view class="flexleft margin_top2">
				<u-icon name="man-add" color="#ff9341" size="16"></u-icon>
				<view class="xiaohuang margin_right margin_left1 strongtext">粉丝{{item.fans_num}}个</view>
				<u-icon name="eye" color="#999" size="16"></u-icon>
				<view class="xiaohui margin_right margin_left1 strongtext">浏览{{item.views}}次</view>
			</view>
			<view class="flexbetween margin_top2">
				<view class="flexleft">
					<u-icon name="map" color="#ff9341" size="16"></u-icon>
					<view class="xiaohui margin_left1 main_size yhxk" style="width: 500rpx;">{{item.detail}}</view>
				</view>
				<view class="xiaohuang main_size">{{returnKmUnit(Number(item.distance))}}</view>
			</view>
		</view>
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keyword: "",
				price_type: 0,
				star_type: 0,
				// 城市选择器开始
				pickerdzshow: false, //城市选择器
				citydata: {
					provence: "",
					provenceid: "",
					city: "",
					cityid: ""
				},
				// 城市选择器结束
				lat: "",
				lng: "",
				cityid: "",
				citytext: "",
				start:"",//年月日
				end:"",//年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum:1,
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.start = data.start
			this.end = data.end
			this.startime = data.startime
			this.endtime = data.endtime
			this.startweek = data.startweek
			this.endweek = data.endweek
			this.daynum = data.daynum
			this.keyword = data.keyword
			let storagecity = uni.getStorageSync("storagecity") || null
			this.citytext = storagecity.citytext
			this.lat = storagecity.latitude
			this.lng = storagecity.longitude
			this.cityid = storagecity.cityid
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/hotelcl/hotelIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: _this.lat,
					lng: _this.lng,
					price_type: this.price_type,
					star_type: this.star_type,
					city_id:this.citydata.cityid,
					area_id:this.citydata.provenceid,
					keyword:_this.keyword
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			surecity(e) {
				this.pickerdzshow = false
				this.citydata = e
				this.star_type = 0
				this.price_type = 0
				this.init()
			},
			sx(val){
				if(val==1){
					this.citydata = {
						provence: "",
						provenceid: "",
						city: "",
						cityid: ""
					}
					this.star_type = this.star_type==0?1:this.star_type==1?2:0
					this.price_type = 0
				}else{
					this.citydata = {
						provence: "",
						provenceid: "",
						city: "",
						cityid: ""
					}
					this.star_type = 0
					this.price_type = this.price_type==0?1:this.price_type==1?2:0
				}
				this.init()
			},
			// 跳转酒店详情
			tzjdxq(id,juli) {
				let date = {
					id: id, //酒店id
					start: this.start, //年月日
					end: this.end, //年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					juli:juli
				}
				uni.navigateTo({
					url: '/pages_lianmengsc/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huangbox {
		word-break: break-all;
		background-color: #fff5ec;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.fenbox {
		background-color: #fff0ef;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FB605C;
	}

	.tupian {
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.dqline {
		width: 1rpx;
		height: 38rpx;
		background-color: #EEEEEE;
	}

	.sobox {
		padding: 10rpx 30rpx;
		border-radius: 60rpx;
		border: 1rpx solid #FF9341;
	}
</style>